<template>
  <div class="div-pop" v-if="isGetCategory" @click="isGetCategory=false">
    <div class="get-category" catchtap>
      <div class="pad-15 border-b">请选择分类</div>
      <div v-for="(item, index) in listCategory" :key="index" @click="onChangeSel(item.categoryId)">
        <div class="flex pad-10 border-b">
          <div class="pad-r-10 pad-l-10">
            <van-checkbox :value="categoryId===item.categoryId?true:false" checked-color="#f8c400"></van-checkbox>
          </div>
          <div class="flex-item">
            {{ item.categoryName }}
          </div>
        </div>
      </div>
      <!-- :class="typeCat === 1 ? '':'border-b'" -->
      <div v-if="typeCat !== 1" class="flex pad-t-10 pad-b-10 align-c"
           @click="$pt.navigateTo({url: '/pages/shop/category/main?action=add&disCategory=true'})">
        <div class="flex-item flex v-align-c">
          <img v-if="fileSpace" mode="widthFix" class="width-20 height-20 mar-r-10"
               :src="fileSpace + '/images/2-6-xinzheng.png'"/>
          <div>新建分类</div>
        </div>
      </div>
      <div class="flex" :class="typeCat === 1 ? 'mar-t--1':''">
        <div class="flex-item align-c pad-10" @click="isGetCategory=false">取消</div>
        <div class="flex-item align-c pad-10 bg-confirm" @click="upperGoods">{{ isUpdate ? '确认修改' : '确认上架' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    saveUpperShelfProjectGoods,
    updateProjectGoodsCategory
  } from '@/api/distribution'
  import { listGoodsCategory } from '@/api/shop'

  export default {
    data() {
      return {
        isComponents: true,
        listCategory: [],
        goodsId: '',
        categoryId: '',
        isGetCategory: false,
        isUpdate: false,
        typeCat: null
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.initListCategory()
    },
    mounted() {
      this.initListCategory()
    },
    methods: {
      upperGoods() {
        if (!this.categoryId) {
          return this.$utils.showToast({ title: '请选择商品类目' })
        }
        console.log(this.goodsId)
        if (this.goodsId) {
          if (!this.isUpdate) {
            saveUpperShelfProjectGoods({
              goodsId: this.goodsId,
              memberId: this.getCustomerId,
              upperShelfFlag: 1,
              userGoodsCategoryId: this.categoryId
            }).then((response) => {
              if (response.isError) return
              this.$utils.showToast({ title: '操作成功' })
              this.isGetCategory = false
              this.$emit('setGoodsRemove', this.goodsId)
              this.$emit('setGoodsStatus')
            }).catch(() => {
            })
          } else {
            updateProjectGoodsCategory({
              goodsId: this.goodsId,
              memberId: this.getCustomerId,
              userGoodsCategoryId: this.categoryId
            }).then((response) => {
              if (response.isError) return
              this.$utils.showToast({ title: '操作成功，请下拉刷新' })
              this.isGetCategory = false
            }).catch(() => {
            })
          }
        }
      },
      initListCategory() {
        if (!this.getCustomerId) return
        listGoodsCategory(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.listCategory = response.data.projectGoodsCategorys
        }).catch(() => {
        })
      },
      selCategory(goodsId, isUpdate, typeCat) {
        if (typeCat) {
          this.typeCat = typeCat
        }
        if (isUpdate) {
          this.isUpdate = true
        } else {
          this.isUpdate = false
        }
        this.goodsId = goodsId
        this.categoryId = ''
        this.isGetCategory = true
      },
      onChangeSel(categoryId) {
        this.categoryId = categoryId
      }
    }
  }
</script>

<style scoped>
  .get-category {
    width: 375px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 990;
  }

  .bg-confirm {
    background-color: #f8c400;
  }
</style>
